<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>客户模块</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
</head>
<body>
 <%-------头部搜索栏--------%>
<div class="layui-bg-gray" style="padding-left: 50px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-panel">
                <form class="layui-form layui-form-pane" style="margin-top: 28px;">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="name" placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="phone" placeholder="请输入电话">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">公司</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="company" placeholder="请输入公司">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">业务员</label>
                            <div class="layui-input-inline">
                                <select name="user_id" id="user_name">
                                    <option value="" selected>业务员</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">客户有效性</label>
                            <div class="layui-input-inline">
                                <select name="deleted">
                                    <option value="" selected>客户有效?</option>
                                    <option value="1">有效</option>
                                    <option value="2">无效</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" type="button" id="sreach" lay-submit lay-filter="sreachSub">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button class="layui-btn" type="reset">
                                <i class="layui-icon layui-icon-tree"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<hr/>
  <%----------表格展示区----------%>
<div class="layui-bg-gray" style="padding: 5px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-panel">
                <table id="tb" lay-filter="tbFilter" style="text-align: center;"></table>
            </div>
        </div>
    </div>
</div>

 <%----------表格头工具栏---------%>
 <div id="toolHeader" style="display: none;">
     <button type="button" class="layui-btn layui-btn-sm" lay-event="add_c">
         <i class="layui-icon layui-icon-addition"></i>
         添加新客户
     </button>
     <c:if test="${user.role == 1}">
         <button type="button" class="layui-btn layui-btn-sm" lay-event="set_c">
             <i class="layui-icon layui-icon-release"></i>
             分配业务员
         </button>
     </c:if>
 </div>

 <%-----------表格行工具栏--------%>
 <div id="toolRow" style="display: none;">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="upd_c">
        <i class="layui-icon layui-icon-edit"></i>
        修改
    </button>
     <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del_c">
        <i class="layui-icon layui-icon-delete"></i>
         删除
     </button>
     <button type="button" class="layui-btn layui-btn-sm" lay-event="visit_c">
         <i class="layui-icon layui-icon-release"></i>
         拜访
     </button>
 </div>

  <%----------添加客户信息弹层---------%>
 <div id="fom_c" style="display: none;text-align: center;">
     <form class="layui-form layui-form-pane" style="margin-top:25px;margin-left: 15px">
         <div class="layui-form-item">
             <label class="layui-form-label">业务员</label>
             <div class="layui-input-inline">
                 <select name="user_id" id="add_uid">
                 </select>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-inline">
                 <label class="layui-form-label">客户姓名</label>
                 <div class="layui-input-inline">
                     <input class="layui-input" type="text" name="name" placeholder="请输入客户姓名" lay-verify="required">
                 </div>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-inline">
                 <label class="layui-form-label">客户电话</label>
                 <div class="layui-input-inline">
                     <input class="layui-input" type="text" name="phone" placeholder="请输入客户电话" lay-verify="required">
                 </div>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-inline">
                 <label class="layui-form-label">性别</label>
                 <div class="layui-input-inline">
                     <input type="radio" name="sex" value="1" title="男" checked>
                     <input type="radio" name="sex" value="2" title="女">
                 </div>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-inline">
                 <label class="layui-form-label">客户公司</label>
                 <div class="layui-input-inline">
                     <input class="layui-input" type="text" name="company" placeholder="请输入客户所属公司" lay-verify="required">
                 </div>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-inline">
                 <input class="layui-btn" type="button" id="forsub" lay-submit lay-filter="subBtn" value="提交">
                 <input class="layui-btn" type="reset" value="重置">
             </div>
         </div>
     </form>
 </div>

 <%-----------给业务员分配客户弹层------------%>
<div id="setDiv" style="display:none;text-align: center;height: 400px;width: 380px">
    <form class="layui-form layui-form-pane" style="margin-top:30px;margin-left: 10px">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="width: 360px">选中的客户信息</label>
            <div class="layui-input-block">
                <textarea name="cus_Name" id="cue_id" class="layui-textarea" style="width: 360px;height: 300"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 27px">
            <label class="layui-form-label">业务员</label>
            <div class="layui-input-inline">
                <select name="user_c" id="user_c"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline" style="margin-top: 90px">
                    <input class="layui-btn" type="button" lay-submit lay-filter="c_sub" value="提交">
                    <input class="layui-btn" type="reset" value="重置">
                </div>
            </div>
        </div>
    </form>
</div>

  <%-----------修改客户弹层-----------%>
 <div id="fom_u" style="display: none;text-align: center;">
     <form class="layui-form layui-form-pane" style="margin-top:25px;margin-left: 15px" lay-filter="fom_up">
         <div class="layui-form-item">
             <div class="layui-inline">
                 <label class="layui-form-label">客户姓名</label>
                 <div class="layui-input-inline">
                     <input class="layui-input" type="text" name="name" readonly lay-verify="required">
                 </div>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-inline">
                 <label class="layui-form-label">客户电话</label>
                 <div class="layui-input-inline">
                     <input class="layui-input" type="text" name="phone" lay-verify="required">
                 </div>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-inline">
                 <label class="layui-form-label">性别</label>
                 <div class="layui-input-inline">
                     <input type="radio" name="sex" value="1" title="男" checked>
                     <input type="radio" name="sex" value="2" title="女">
                 </div>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-inline">
                 <label class="layui-form-label">客户公司</label>
                 <div class="layui-input-inline">
                     <input class="layui-input" type="text" name="company" lay-verify="required">
                 </div>
             </div>
         </div>
         <div class="layui-form-item">
             <div class="layui-inline">
                 <input class="layui-btn" type="button" id="fup_sub" lay-submit lay-filter="subBtn" value="提交">
                 <input class="layui-btn" type="reset" value="重置">
             </div>
         </div>
     </form>
 </div>

 <%-- 新增拜访记录模板 --%>
 <div type="text/html" id="addVistLogTpl"  style="display: none;text-align: center;">
     <form class="layui-form layui-form-pane" style="margin-left: 15px;margin-top: 15px" lay-filter="formFilter">
         <div class="layui-form-item">
             <label class="layui-form-label">客户名称</label>
             <div class="layui-input-inline">
                 <input type="text" name="name" readonly class="layui-input">
             </div>
         </div>
         <div class="layui-form-item">
             <label class="layui-form-label">拜访时间</label>
             <div class="layui-input-inline">
                 <input type="text" name="visitTime" lay-verify="required" lay-reqText="拜访时间不能为空"  id="visitTime" readonly class="layui-input">
             </div>
         </div>
         <div class="layui-form-item layui-form-text" style="width: 300px">
             <label class="layui-form-label">拜访内容</label>
             <div class="layui-input-block">
                 <textarea class="layui-textarea" name="descp"></textarea>
             </div>
         </div>
         <button id="subBtn" type="button" lay-filter="subBtnFilter" style="display: none" lay-submit></button>
     </form>
 </div>


</body>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/static/js/custo.js"></script>--%>
<script>
    layui.use(['jquery','form','table','layer','laydate'],function () {
        $ = layui.jquery;
        form = layui.form;
        table = layui.table;
        layer = layui.layer;
        laydate = layui.laydate;

        /*1.进来就通过ajax查询所有业务员姓名*/
        function initAllusername(dom){
            $.get("${pageContext.request.contextPath}/su.do?service=allName",function (rs) {
                var data = rs.data;
                console.log(data);
                var sele = $(dom);
                for(var u=0;u<data.length;u++){
                    sele.append("<option value='"+data[u].id+"'>"+data[u].username+"</option>")
                }
                form.render("select");
            })
            return false;
        }
        initAllusername("#user_name");

        /*2.表格参数[列，数据来源，数据适配]*/
        var tb_option = {
            id:"tb1",
            elem:"#tb",
            url:'${pageContext.request.contextPath}/cus.do?service=PageInfo',
            height:400,
            page:true,
            limits:[5,10,15,20,25,30,35,40],
            toolbar:"#toolHeader",
            cols:[[
                {type:"checkbox",fixed:"left"},
                {field:'id',title:"客户ID",width:80,fixed:"left",align:"center"},
                {field:'name',title:"姓名",width:80,align:"center"},
                {field:'sex',title:"性别",width:100,align:"center",templet:function (d) {
                        var sex = d.sex;
                        if(sex == 1){
                            return "<b style='color:blue'>男</b>"
                        }else if(sex == 2){
                            return "<b style='color:red'>女</b>"
                        }
                    }},
                {field:'phone',title:"电话",width:150,align:"center"},
                {field:'company',title:"公司",align:"center"},
                {field:'deleted',title:"维护性",width:100,align:"center",templet:function (d) {
                        var deleted = d.deleted;
                        if(deleted == 1){
                            return "<b style='color:olivedrab'>有效</b>"
                        }else if(deleted == 2){
                            return "<b style='color:red'>无效</b>"
                        }
                    }},
                {field:'user_id',title:"业务员id",align:"center",hide:true},
                {field:'username',title:"业务员",width:100,align:"center"},
                {field:'create_time',title:"建立时间",minWidth:100,align:"center"},
                {field:'update_time',title:"更新时间",minWidth:100,align:"center"},
                {title:"操作",toolbar:"#toolRow",minWidth:280,align:"center",fixed:"right"}
            ]],
            parseData:function(d){
                if(d.code == 200){
                    return {
                        "code":d.code,
                        "msg":d.msg,
                        "count":d.pageCount,
                        "data":d.data.lis
                    }
                }
            },
            response:{
                statusCode:200
            }
        }
        var tb_render = table.render(tb_option);

        /*3.监听表头事件*/
        table.on("toolbar(tbFilter)",function(obj) {
            console.log(obj.event);
            if(obj.event == "add_c"){
                add();
            }
            if(obj.event == "set_c"){
                var checkStatus = table.checkStatus("tb1");
                //console.log(checkStatus.data);
                setU(checkStatus);
            }
            return false;
        })

        // 添加按钮触发此函数：打开弹层
        function add(){
            console.log("表格toolbar添加事件");
            layer.open({
                title:"添加客户信息",
                type:1,
                area:[400,450],
                content:$("#fom_c"),
                anim:6,
                move:true,  //设置可拖拽
                success:function (layero, index) {
                    form.render("select");
                    initAllusername("#add_uid");
                    form.on("submit(subBtn)",function (tbdata) {
                        $.post("${pageContext.request.contextPath}/cus.do?service=addInfo",tbdata.field,function (rs) {
                            if(rs.code == 200){
                                layer.msg("添加成功!");
                                $("#sreach").click();
                            }
                        })
                        layer.close(index);
                        return false;
                    })
                },
                end:function () {
                    $("#add_uid").text("");
                }
            })
        }

        // 分配业务员按钮触发：打开弹层
        function setU(tbCheck){
            var u_option={
                type:1,
                title:"为客户分配业务员",
                area:[500,600],
                content:$("#setDiv"),
                anim:6,
                btnAlign:"center",
                success:function (layero,index) {
                    var cids = inData(tbCheck) // 给分配业务员的弹层文本框回填客户数据
                    initAllusername("#user_c");
                    form.on("submit(c_sub)",function (tbData) {
                        $.post("${pageContext.request.contextPath}/cus.do?service=setUser&"+cids,tbData.field,function (rs) {
                            console.log(rs);
                            if(rs.code == 200){
                                $("#sreach").click();
                            }
                            layer.close(index);
                        })
                    })
                },
                end:function () {
                    $("#cue_id").text("");
                    $("#user_c").html("");
                }
            }
            layer.open(u_option);
        }

        /*向分配业务员弹层的文本框回填客户信息*/
        function inData(checkTb){
            var cueId = $("#cue_id");
            var c_data = checkTb.data;
            var ids = new Array();
            for(var t=0;t<c_data.length;t++){
                console.log(c_data[t]);
                cueId.append(c_data[t].name+" , ");
                ids.push("cid="+c_data[t].id);
            }
            return ids.join("&");
        }

        /*4.监听表行事件*/
        table.on("tool(tbFilter)",function (rowdata) {
            console.log(rowdata.data);
            if(rowdata.event == "upd_c"){
                upd(rowdata.data);
            }else if(rowdata.event == "del_c"){
                del(rowdata.data);
            }else if(rowdata.event == "visit_c"){
                visit(rowdata.data);
            }
            return false;
        })

        function upd(data) {
            console.log("触发修改");
            form.val("fom_up",data);
            layer.open({
                title:"修改客户信息",
                type:1,
                area:[400,450],
                content:$("#fom_u"),
                btnAlign:"center",
                anim:6,
                success:function (layero,index) {

                    /*监听submit事件*/
                    form.on("submit(subBtn)",function (fdata) {
                        /*检查修改了哪些数据*/
                        var res = verifyFormData(data,fdata.field);
                        console.log("=========="+res["one"])
                        if(res["one"]){
                            $.post("${pageContext.request.contextPath}/cus.do?service=updInfo&"+res["two"],fdata.field,function (rs) {
                                if(rs.code == 200){
                                    layer.msg("修改完成");
                                    $("#sreach").click();
                                }
                            })
                            layer.close(index);
                            return false;
                        }
                    })
                }
            })
        }

        /*核对客户信息哪些被修改,并组装被修改的字段名*/
        function verifyFormData(oldfom,newfom){
            var flag = false;
            var resultV = "id="+oldfom.id+"&updCol=";
            console.log(oldfom.name+"*********"+newfom.name)
            if(oldfom.name != newfom.name){
                resultV = resultV+"name,";
                flag = true;
            }
            if(oldfom.phone != newfom.phone){
                resultV = resultV+"phone,";
                flag = true;
            }
            if(oldfom.sex != newfom.sex){
                resultV = resultV+"sex,";
                flag = true;
            }
            if(oldfom.company != newfom.company){
                resultV = resultV+"company";
                flag = true;
            }
            layer.msg(!flag ? "您并未修改":resultV);
            return {"one":flag,"two":resultV};
        }

        function del(data) {
            //alert("删除");
            layer.confirm("请确认是否删除",function (index) {
                $.post("${pageContext.request.contextPath}/cus.do?service=delInfo",data,function (rs) {
                    if(rs.code == 200){
                        layer.msg("删除成功!");
                        $("#sreach").click();
                    }
                })
                layer.close(index);
            })
        }
        function  visit(rowData) {
            layer.open({
                type:1,
                content:$("#addVistLogTpl").html(),
                area:['340px','440px'],
                btn:['确认','取消'],
                btnAlign: 'c',
                success:function (layer0,index) {
                    //为表单赋值
                    form.val("formFilter",rowData);
                    //初始化时间组件
                    laydate.render({elem:"#visitTime",type:"datetime"})
                    //表单的提交监听
                    form.on("submit(subBtnFilter)",function (d) {
                        var formData = d.field;//表单数据
                        formData.customerId = rowData.id;//设置ID值 客户ID
                        $.post("${pageContext.request.contextPath}/visit.do?service=add",formData,function (rs) {
                            layer.msg(rs.msg);
                            if (rs.code != 200){
                                return false;
                            }
                            //关闭弹出层
                            layer.close(index);
                            //重载表格数据 更新数据
                            $("#searchBtn").click();
                        })
                        return false;//阻止表单的默认提交行为
                    })


                },
                yes:function (index,layero) {
                    $("#subBtn").click();
                }

            });
        }


        /*5.监听搜索事件*/
        form.on("submit(sreachSub)",function (fomdata) {
            var name = fomdata.field.name;
            var phone = fomdata.field.phone;
            var company = fomdata.field.company;
            var user_id = fomdata.field.user_id;
            var deleted = fomdata.field.deleted;

            tb_render.reload({
                where:{
                    name:name,
                    phone:phone,
                    company:company,
                    user_id:user_id,
                    deleted:deleted
                }
            })
        })

    })
</script>
</html>
